<template>
    <div class="app-container" v-if="formData != null">
        <a-card class="box-card" :cardOpen="true">
            <div slot="header">
                <span>计划基本信息</span>
            </div>
            <div slot="header-toolbtn">
                <el-button type="primary" size="mini" @click="handleDrillDetail">查看演练详细信息</el-button>
            </div>
            <el-form ref="elForm" size="small" label-width="100px" label-position="left">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="计划标题" prop="drillTitle">
                            {{ planInfo.planTitle }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="事件标题" prop="drillTitle">
                            {{ formData.eventName }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </a-card>
        <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
            <div slot="header">
                <span>演练流程</span>
            </div>
            <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                <el-row class="role-groups">
                    <div class="role-group-side">
                        <el-tree :data="flowData" ref="flowNodeList" node-key="handleId" default-expand-all check-on-click-node highlight-current @node-click="onFlowNodeClick">
                            <span class="flow-node" slot-scope="{ node, data }">
                                <span class="flow-label">{{ data.handleName }}</span>
                            </span>
                        </el-tree>
                    </div>
                    <div class="role-list">
                        <el-form-item label="流程状态" prop="event_name">
                            <template v-if="currentHandle.status == 0">
                                未开启
                                <el-button type="primary" size="mini" @click="openDrillFlow" v-if="canStartFlow">开启流程</el-button>
                            </template>
                            <template v-else> 已开启 </template>
                        </el-form-item>
                        <el-form-item label="演练任务" prop="event_name">
                            <handle-task-table ref="handleTaskTable" :tasks="currentHandle.drillPractsHandleLevel.drillPractsTasks || []" :type="1" :handleId="currentHandle.handleId" :planId="formData.planId" :levelId="currentHandle.drillPractsHandleLevel.levelId" @refreshCurrentTasks="setCurrentTasks" />
                        </el-form-item>
                        <el-form-item label="检查内容" prop="event_name">
                            {{ currentHandle.drillPractsHandleLevel.checkContent }}
                        </el-form-item>
                    </div>
                </el-row>
            </el-form>
        </a-card>
        <el-row :gutter="15">
            <el-col :span="12">
                <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
                    <div slot="header">
                        <span>流程执行动态</span>
                    </div>
                    <drill-feed-log-view :id="formData.planId" :type="1" :time="1000 * 60 * 0.1" />
                </a-card>
            </el-col>
            <el-col :span="12">
                <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
                    <div slot="header">
                        <span>任务执行动态</span>
                    </div>
                    <drill-feed-log-view :id="formData.planId" :type="2" :time="1000 * 60 * 0.1" />
                </a-card>
            </el-col>
        </el-row>
        <el-row :style="{ textAlign: 'center', marginTop: '15px' }">
            <el-button type="primary" size="mini" @click="handleCloseDrill">结束演练</el-button>
        </el-row>
        <task-execute ref="taskExecute" @handleOk="onTaskExecuted" />
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import TaskExecute from "./components/TaskExecute.vue";
import * as DrillApi from "@/api/drill/drill.js";
import * as PlanApi from "@/api/plan/plan.js";
import DrillFeedLogView from "./components/DrillFeedLogView.vue";
import HandleTaskTable from "./modules/DrillHandleTaskTable.vue";

export default {
    name: "DrillContentEdit",
    components: { ACard, TaskExecute, DrillFeedLogView, HandleTaskTable },
    props: [],
    provide() {
        return {
            groups: () => this.groups,
        };
    },
    data() {
        return {
            formData: {
                planId: 0,
                contentId: 0,
                eventName: "",
                eventType: "",
                eventLevel: "",
                eventLocaltion: "",
                eventTime: "",
                contentTitle: "",
                impactArea: "",
                surroundings: "",
                eventCause: "",
                plaUser: 0,
                plaUserName: "",
                plaPlanId: 0,
                plaPlanName: "",
            },
            planInfo: {},
            groups: [],
            currentGroup: {},
            currentHandle: {
                drillPractsHandleLevel: {},
            },
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,

                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
            affPickType: "",
            fName: "",
            Id: 0,
            anTitle: "",
            flowData: [
                {
                    flowId: 1,
                    flowTitle: "组建领导小组",
                },
            ],
            activeScene: "",
            sceneTabs: [],
            currentScene: {},
            timer: null,
            virsualTasks: [],
        };
    },
    computed: {
        canStartFlow() {
            // 判断是否显示开启处置流程的按钮
            // 在flowData中找到第一个status == 0 的项
            let unStartNode = this.flowData.find(item => item.status == 0);
            return unStartNode.handleId == this.currentHandle.handleId;
        },
    },
    watch: {},
    created() {},
    mounted() {
        this.formData.planId = this.$route.query.planId;
        this.getPlanContent();
    },
    methods: {
        getPlanContent() {
            DrillApi.getDrillPlanInfo(this.formData.planId).then(res => {
                let data = res.data;
                this.formData = {
                    planId: data.planId,
                    contentId: data.contentId,
                    eventName: data.eventName,
                    eventType: data.eventType,
                    eventLevel: data.eventLevel,
                    eventLocaltion: data.eventLocaltion,
                    eventTime: data.eventTime,
                    contentTitle: data.contentTitle,
                    impactArea: data.impactArea,
                    surroundings: data.surroundings,
                    eventCause: data.eventCause,
                    plaUser: data.plaUser,
                    plaUserName: data.plaUserName,
                    plaPlanId: data.plaPlanId,
                    plaPlanName: data.plaPlanName,
                    responseLevel: Number(data.responseLevel),
                    handleId: data.handleId,
                };
                this.planInfo = data.drillPractsPlan;
                this.groups = data.drillPractsGroups;
                this.flowData = data.drillPractsHandles;
                this.$nextTick(() => {
                    if (data.drillPractsHandles.length > 0) {
                        let handle = null;
                        // 如果有历史定位流程，则恢复历史定位流程的节点
                        if (this.currentHandle.handleId != undefined) {
                            handle = data.drillPractsHandles.find(val => val.handleId == this.currentHandle.handleId);
                        }
                        if (handle) {
                            this.currentHandle = handle;
                        } else {
                            // 没有历史定位流程节点则默认第一个流程
                            this.currentHandle = data.drillPractsHandles[0];
                        }
                        // 自动定位到第一个流程
                        this.$refs.flowNodeList.setCurrentKey(this.currentHandle.handleId);
                        let handleNode = this.$refs.flowNodeList.getCurrentNode();
                        this.onFlowNodeClick(this.currentHandle, handleNode);
                    }
                });
            });
        },
        onGroupNodeClick(val) {
            this.currentGroup = val;
        },
        onFlowNodeClick(val) {
            console.log(val);
            this.currentHandle = val;
        },
        handleDrillDetail() {
            this.$tab.openPage("演练详情", "/drill/drillDetail");
        },
        openDrillFlow() {
            this.$modal.confirm("开启流程将派发该流程下的任务，是否确认开启？").then(() => {
                DrillApi.startDrillFlow(this.currentHandle.handleId).then(res => {
                    this.$modal.msgSuccess("演练流程已开启");
                    this.getPlanContent();
                });
            });
        },
        handleExecuteTask(data) {
            this.$refs.taskExecute.showDialog(data);
        },
        onTaskExecuted() {
            this.getVirsualTask();
        },
        setCurrentTasks(data) {
            this.currentHandle.drillPractsHandleLevel.hdTasks = data;
        },
        handleCloseDrill() {
            DrillApi.closePlan(this.formData.planId).then(res => {
                if (res.code == 200) {
                    // 结束成功
                    this.$modal.msgSuccess("应急演练已结束");
                    // TODO 返回并弹出演练详情
                    this.$router.push({
                        path: "/drill/drillDetail",
                        query: {
                            planId: this.formData.planId,
                        },
                    });
                } else {
                    // 结束失败
                    this.$modal.msgError("应急演练结束失败");
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.role-groups {
    display: flex;

    .role-group-side {
        min-width: 200px;
    }

    .role-list {
        flex: 1;
        margin-left: 15px;
        box-sizing: content-box;
        overflow: hidden;
    }
}

.drill-btns {
    text-align: center;
    margin-top: 20px;
}

::v-deep {
    .el-tree-node__content {
        display: flex;

        .flow-node {
            flex: 1;
            display: flex;

            .flow-label {
                flex: 1;
                line-height: 28px;
            }

            .flow-btns {
                margin-right: 10px;
            }
        }
    }

    .el-button.tab-edit-btn {
        color: #13ce66;
        margin-left: 10px;
        font-size: 12px;
    }
}

.feed-container {
    background: #0b133c;
    color: white;
    border-radius: 10px;
    padding: 15px;

    .feed-list {
        overflow-y: scroll;
        max-height: 300px;

        // 设置滚动条宽度
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
            background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        &::-webkit-scrollbar-thumb {
            background: #2e6190;
            border-radius: 3px;
        }

        .feed-item {
            font-size: 12px;
            line-height: 25px;
        }
    }
}

ul,
li {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}
</style>
